<template>
  <form class="formBox" method="get">
    <div class="formTitle">Shipping Address</div>

    <div class="formHeader">Address Line 1</div>
    <input
      type="search"
      id="addrs_1"
      class="formInput"
      placeholder="Search address here..."
    />

    <div class="formHeader">Address Line 2</div>
    <input class="formInput" id="addrs_2" />

    <div class="formHeader">Suburb</div>
    <input class="formInput" id="suburb" />

    <div class="formHeader">State</div>
    <input class="formInput" id="state" />

    <div class="formHeader">Postcode</div>
    <input class="formInput" id="postcode" />

    <input class="btn" type="submit" name="next" />
  </form>
</template>

<script>
export default {
  name: "CheckoutForm",
  loadAFWIdget: true,
  mounted() {
    let script = document.createElement("script");
    script.setAttribute(
      "src",
      "https://api.addressfinder.io/assets/v3/widget.js"
    );
    script.setAttribute("async", true);
    script.onload = () => {
      this.widget = new window.AddressFinder.Widget(
        document.getElementById("addrs_1"),
        "REFPGXKTJYHAQN6489CW",
        "AU",
        {
          address_params: {
            "address_params": {
              "gnaf": "1"
            },
            "empty_content": "No addresses were found. This could be a new address, or you may need to check the spelling. Learn more"
          }
        }
      );
      this.widget.on("result:select", (fullAddress, metaData) => {
        document.getElementById("addrs_1").value = metaData.address_line_1;
        document.getElementById("addrs_2").value = metaData.address_line_2;
        document.getElementById("suburb").value = metaData.locality_name;
        document.getElementById("state").value = metaData.state_territory;
        document.getElementById("postcode").value = metaData.postcode;
      });
    };
    document.head.appendChild(script);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.formBox {
  height: content;
  padding: 1.5em 2.5em;
  border-top: 0px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: -4px 4px 10px 0 rgba(0, 0, 0, 0.2);
}

.formTitle {
  font-size: 1.6em;
  padding-bottom: 6px;
  margin-bottom: 15px;
  border-bottom: 1.5px solid #e8e8e8;
}

.formHeader {
  font-size: 16px;
  margin-bottom: 2px;
}

.formInput {
  width: 70%;
  height: 30px;
  font-size: 16px;
  padding-left: 6px;
}

.formInput:not(:last-child) {
  margin-bottom: 15px;
}

input[type="submit"] {
  display: block;
  -webkit-appearance: button;
  font-size: 15px;
  width: 135px;
  height: 36px;
  margin-left: 277px;
  background-color: #e18988;
  color: #ffffff;
  border: none;
  border-radius: 3px;
}

/* Forces .form-input styles onto search type */
input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}
</style>
